<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="author" content="liaosimin">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>发布图片</title>
    <link rel="stylesheet" href="{{static_url('css/set-profile.css')}}"/>
    <link rel="stylesheet" type="text/css" href="http://i.gtimg.cn/vipstyle/frozenui/1.2.0/css/frozen.css?_bid=306">
    <link rel="stylesheet" href="{{static_url('css/photo.css')}}"/>
    <link rel="stylesheet" href="{{static_url('css/iconfont.css')}}"/>
    <style>
        .photo_font{
            font-size: 4em;
        }
    </style>
</head>
<body style="background-color: #F2F2F2">
<header class="title-box2">
    <a href="{{reverse_url('Home')}}" class="return-btn"></a>
    <span class="title">发布图片</span>
</header>
<div style="min-height: 20em;margin: 5em 2% 2% 2%;padding: 4% 2%;background-color: #ffffff">
    <img src="" style="min-width: 100%;min-height: 80%">
    <div style="position: absolute;left: 30%;top: 35%;width: 25%;height: 7%">
        <form method="post"><input type="file" class="input_file"></form>
        <span class="iconfont photo_font">&#xe603;</span>
    </div>
</div>
<textarea style="display:block;font-size:2em;resize:none;margin: 2%;width: 96%;height: 6em;background-color: #ffffff;" rows:3 placeholder="请输入简评"></textarea>

<div class="ui-btn-wrap">
    <button class="ui-btn-lg ui-btn-primary">发布</button>
</div>
</body>
<script src="http://i.gtimg.cn/vipstyle/frozenjs/lib/zepto.min.js?_bid=304"></script>
<script src="{{static_url('js/lrz.mobile.min.js')}}"></script>
<script src="http://i.gtimg.cn/vipstyle/frozenjs/1.0.1/frozen.js?_bid=304"></script>

<script>
    var input = document.querySelector('input');
    var base64;
    input.onchange = function () {
        var el=$.loading({content:'正在压缩...'});
        lrz(this.files[0], {width: 200}, function (results) {
            // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
            $("img").attr("src", results.base64);
            base64 = results.base64;
//            console.log(results);
        });
        el.loading("hide");
    };

    $('.ui-btn-primary').on('click', function () {
        var el=$.loading({content:'正在上传...'});
        $.post('/post', {'intro': $('textarea').val(), 'data': base64}, function (res) {
            el.loading("hide");
            if (res.success) {
                var dia=$.dialog({
                    title:'上传成功',
                    content:'点击确认返回',
                    button:["确认"]
                });

                dia.on("dialog:action",function(e){
                    if(e.index == 0)window.location='/photo';
                });
            }
            else {
                $.tips({content: res.error_text, stayTime: 3000, type: "info"});
            }
        });
    });
</script>
</html>